{% extends 'drill/base.html' %}
{% load hocatags %}

{% block header %}
{% menu lesson %}
{% endblock %}

{% block content %}

<script type='text/javascript'>
lesson_sname = "{{lesson.sname}}";
drill_sname = "{{drill.sname}}";
total_qty = {{drill.total_qty}};

//verbs = {{verbs|safe}};

function debug(s) {
  e = $("<p class='debugp'/>");
  e.html(s);
  $('#debug_div').append( e );
};

function debugJSON(q) {
  // well not strictly json, but just a structure of dicts and arrays
  var s =  JSON.stringify(q, null, "_");
  s = s.replace(/\n/gi, "<br/>\n");
  debug(s);
};

function updateSendBtn(e) {
  if ($.trim($('#answer_text').val())) {
    $('#send_btn').removeClass('inactive');  
  }
  else {
    $('#send_btn').addClass('inactive');  
  }
}
function init() {
  debug('init');
  $('#send_btn').addClass('inactive');  
  $('#answer_text').val('');  
  $('#answer_text').keyup( updateSendBtn );  
  $('#answer_text').keypress( function(e) { if (e.which == 13) sendAnswer1(); }  );  
  $('#answer_text').attr('disabled','disabled');
//   $.ajaxSetup({ 
// 	  scriptCharset: "latin-1" , 
// 	  contentType: "application/json; charset=utf-8"
//   });
  $.ajaxSetup({ scriptCharset: "utf-8" ,contentType: "application/x-www-form-urlencoded; charset=UTF-8" });
  //$(document).keypress(function foo(e) { alert('baz'); } )
  //$(document).bind('keydown', function(e) { if (e.keyCode == 13 & ! $('#next_btn').hasClass('inactive')) alert('biz'); });
  $('#next_btn').focus()
};

var qnumber = -1;
var verb = null;
var tense = null;
var grampers = null;

function loadQuestionCallback1(jsondata) {
  debug('loadQuestionCallback');
  data = $.evalJSON(jsondata);
  debugJSON(data);
  $('#answer_text').val('');
  if (data['question_id'] == undefined) {
    $('#question_text').html('This drill is over! Click \'List of drills\' above to play another drill.');
    $('#feedback').html('');
    $('#input').html('');
  }
  else {
    debug('at least one more');
    verb = data['verb'];
    tense = data['tense'];
    grampers = data['grampers'];
    $('#verb').html(verb);
    $('#tense').html(tense);
    $('#grampers').html(grampers);
    $('#question_text').html('Question # ' + (qnumber+1) + '. <p> ' + data['question_text'] + '</p>');
    $('#feedback').html('');
    $('#answer_text').removeAttr('disabled');
    $('#answer_text').focus();
    $('#answer_text').val('');
    $('#question_no').html('#'+(qnumber+1));
  }
  $('#next_btn').addClass('inactive');
};

function loadQuestion1() {
  $.get('{{urlpath}}/json_get_question_simple?drill='+drill_sname+'&i='+qnumber, loadQuestionCallback1);
  $('#total_qty').css('display', 'block');
};

function nextQuestion1() {
  debug('nextQuestion1()');
  qnumber += 1;
  loadQuestion1();
};


$(init);

globaldata = null;

function answerCallback1(jsondata) {
  debug(jsondata);
  data = $.evalJSON(jsondata);
  globaldata = data;
  debugJSON(data);

/*  var parts = data['parts']
  $.each(parts, function(index, value) { debug('val:'+value[1]+',  expl: ' + value[2]); });*/

  if (data['code'] == 0) {
    green();
    $('#feedback').html('<p class="feedbackp">Your answer, <i>"'+data['users_answer']+'"</i>, was correct. </p>');
    $('#next_btn').removeClass('inactive');
    $('#send_btn').addClass('inactive');
    $('#answer_text').attr('disabled','disabled');
    $('#next_btn').focus();
  }
  else {
    red();
    $('#feedback').html('<p class="feedbackp">Your answer, <i>"'+data['users_answer']+'"</i>, was incorrect. </p>');
    $('#feedback').append(data['partshtml']);
  }
  
  if (data['code'] == 0) {
    //$('#feedback').css('background-color','green');
  }
  else {
    //$('#feedback').css('background-color','red');
  };
};

function sendAnswer1() {
  answer = $('#answer_text').val();
  data = {
    verb : verb,
    tense: tense,
    grampers : grampers,
    answer :  answer
  };
  debugJSON(data);
  jsondata = $.toJSON(data);
  debug(jsondata);
  $.post('{{urlpath}}/json_evaluate_answer1/', jsondata, answerCallback1);
  //$('#feedback').append('<h4 class="feedbackheading">'+answer+'</h4>');
};

function toggledebug() {
  $('#debug_div').toggle();
  $('#question_text').toggleClass('colored');
  $('#input').toggleClass('colored');
  $('#feedback').toggleClass('colored');
}

function green() {
  $('#green').fadeIn().fadeOut();
}

function red() {
  $('#red').fadeIn().fadeOut();
}

//lesson_sname = 'lesson_07';
//drill_sname = 'drill_01';
q = null; // the json like js dict that contains first question details, then also answer details

function loadQuestionCallback2(jsondata) {
  debug('loadQuestionCallback');
  q = $.evalJSON(jsondata);
  debugJSON(q);
  $('#answer_text').val('');

/*  verb = data['verb'];
  tense = data['tense'];
  grampers = data['grampers'];
  $('#verb').html(verb);
  $('#tense').html(tense);
  $('#grampers').html(grampers);*/
  $('#question_text').html('Question # ' + (qnumber+1) + '. <p> ' + q['question_text'] + '</p>');
  $('#inputfields').html('');
  for (var x in q.inputs) {
    input = q.inputs[x];
    $('#inputfields').append(input.name+": <input class='input' type='"+input.type+"' id='" + input.id+"'><br/>");
  }
  //$('#answer_text').removeAttr('disabled');
  //$('#answer_text').val('');
  $('#question_no').html('#'+(qnumber+1));
  $('#next_btn').addClass('inactive');
};

function loadQuestion2() {
  $.get('{{urlpath}}/'+lesson_sname+'/json_get_question2/'+drill_sname, loadQuestionCallback2);
};

function nextQuestion2() {
  debug('nextQuestion()');
  qnumber += 1;
  loadQuestion2();
};





function answerCallback2(jsondata) {
  debug('answerCallback2: ' + jsondata);
  data = $.evalJSON(jsondata);
  globaldata = data;
  debugJSON(data);

/*  var parts = data['parts']
  $.each(parts, function(index, value) { debug('val:'+value[1]+',  expl: ' + value[2]); });*/
  
  if (data['code'] == 0) {
    green();
    $('#feedback').html('<p class="feedbackp">Your answer, <i>"'+data['users_answer']+'"</i>, was correct. </p>');
    $('#next_btn').removeClass('inactive');
    $('#send_btn').addClass('inactive');
    $('#answer_text').attr('disabled','disabled');
  }
  else {
    red();
    $('#feedback').html('<p class="feedbackp">Your answer, <i>"'+data['users_answer']+'"</i>, was incorrect. </p>');
    $('#feedback').append(data['partshtml']);
  }
  
  if (data['code'] == 0) {
    //$('#feedback').css('background-color','green');
  }
  else {
    //$('#feedback').css('background-color','red');
  };
};

function sendAnswer2() {
  for (i in q['inputs']) {
    input = q['inputs'][i];
    id = input['id'];
    elem = $('#'+id);
    val = elem.val();
    q['inputs'][i]['answer_text'] = elem.val();
  }
  //#answer = $().val();
  //debugJSON(data);
  //debugJSON(q);
  jsondata = $.toJSON(q);
  debug(jsondata);
  $.post('{{urlpath}}/json_evaluate_answer2/', jsondata, answerCallback2);
  //$('#feedback').append('<h4 class="feedbackheading">'+answer+'</h4>');
};


function updateSendBtn2(e) {
  if ($.trim($('#answer_text').val())) {
    $('#send_btn').removeClass('inactive');  
  }
  else {
    $('#send_btn').addClass('inactive');  
  }
}




</script>

  <div id='question_no'>
<!--    #14-->
  </div>
  <div id='total_qty'>
    of {{drill.total_qty}}
  </div>
  <div id='percentage'>
<!--    78%-->
  </div>

  <div id='question_text'>
<!--    Sinan evine ________. 
    <br/>
    <br/>
    Write the correct conjugated form of 'gitmek' (to walk) in present tense.-->
    <div id='startsmg'> Click <i>next</i> to start </div>
  </div>

<!--  <div id='illustration'>
    illustration of Sinan going home
  </div>-->

  <div id='input'>
    <div id='inputfields'>
    <input id='answer_text' disabled='disabled' type='text' value='gidiyor'/>
    <a class='btn' id='send_btn' href='javascript:sendAnswer1()'> Answer </a>
    <a class='btn' id='next_btn' href='javascript:nextQuestion1()'> Next </a></div>
    <br/>
  </div>

  <div id='feedback'>
<!--    <a href='javascript:green()'> green </a>
    <a href='javascript:red()'> red </a>-->
  </div>

  <div id='green'>
    <img src='{{urlpath}}/site_media/check_mark.svg' style='width: 100%; height: 100%;'/>
  </div>

  <div id='red'>
    <img src='{{urlpath}}/site_media/cross.svg' style='width: 100%; height: 100%;'/>
  </div>

{% endblock %}



</body>

</html>